<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.min.css" rel="stylesheet">
    <!--<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <script type="text/javascript">
        console.log(returnCitySN["cip"] + ',' + returnCitySN["cname"])
        // var returnCitySN = {"cip": "61.144.96.110", "cid": "440106", "cname": "广东省广州市天河区"};
    </script>-->
</head>
<body>
<div id="app">
    <el-button type="primary" @click="print">print</el-button>
    <el-button type="primary" @click="stand">stand</el-button>
    <el-button type="primary" @click="map">调用腾讯MapApi</el-button>
    <el-button type="primary" @click="demo">demo</el-button>
    <h2>{{ipData}}</h2>
    <script type="text/javascript">
        function demo(resp) {
            console.log(resp);
            console.log("de");
        }
    </script>
    <script type="text/javascript"
            src="https://apis.map.qq.com/ws/location/v1/ip?ip=61.144.96.110&key=N3WBZ-HHIKU-5A5VX-4XSNS-A6BR5-O5BWG&callback=demo">
        function demo(resp) {
            console.log(resp);
            console.log("kk");
        }
    </script>
</div>
</body>
<script src="assets/js/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.min.js"></script>
<!--  vue  -->
<script src="assets/js/util/http-util.js"></script>
</html>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            ipData: '',
            ipDetail: [],
        },
        methods: {
            print: function () {
                let thisObj = this;
                let url = "http://pv.sohu.com/cityjson?ie=utf-8";
                $.ajax({
                    type: 'get',
                    url: url,
                    success: function (resp) {
                        thisObj.ipData = resp;
                    }
                })
            },
            stand: function () {
                let thisObj = this;
                $.getJSON("https://api.ipify.org/?format=jsonp&callback=?&_=" + Math.random(), function (resp) {
                    thisObj.ipData = resp.ip;
                });
            },
            map: function () {
                let thisObj = this;
                let url = "https://apis.map.qq.com/ws/location/v1/ip?ip=" + thisObj.ipData + "&key=N3WBZ-HHIKU-5A5VX-4XSNS-A6BR5-O5BWG&callback=demo";
                $.getJSON(url,function demo(resp){
                    console.log(resp)
                    console.log("map")
                })
            },
            demo: function () {
                let thisObj = this;
                $.ajax({
                    async : true,
                    url : "https://apis.map.qq.com/ws/location/v1/ip?ip=" + thisObj.ipData + "&key=N3WBZ-HHIKU-5A5VX-4XSNS-A6BR5-O5BWG&output=jsonp&callback=demo",
                    type : "GET",
                    dataType : "jsonp", // 返回的数据类型，设置为JSONP方式
                    jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
                    jsonpCallback: 'handleResponse', //设置回调函数名
                    success: function(resp){
                        console.log(resp.ad_info);
                    }
                });
            }
        }
    })
</script>